<template>
    <div class="container">
        <el-row>
            <el-card shadow="never">
                <div slot="header">
                    <h1>AES加密测试：<el-button type="primary" size="small" @click="keyBtn">AES加密</el-button></h1>
                    <p><el-input v-model="password" placeholder="请输入新密码"></el-input></p>
                    <p><el-input v-model="key" placeholder="秘钥" readonly></el-input></p>
                    <h1>AES解密测试：<el-button type="success" size="small" @click="keyBtn1">AES解密</el-button></h1>
                    <p><el-input v-model="key1" placeholder="请输入秘钥"></el-input></p>
                    <p><el-input v-model="password1" placeholder="原密码" disabled></el-input></p>
                </div>
            </el-card>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            password: '',
            key: '',
            password1: '',
            key1: ''
        }
    },
    methods: {
        keyBtn: function () {
            let password = this.cryptoAes.Encrypt(this.password)
            this.key = password
        },
        keyBtn1: function () {
            let key1 = this.cryptoAes.Decrypt(this.key1)
            this.password1 = key1
        }
    }
}
</script>

<style lang="less" scoped>
.el-search-item {
    margin-bottom: 0;
}
.el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
}
.el-card/deep/.el-card__header {
    border-bottom: none !important;
}
</style>
